<template>
  <div>
      <!-- <transition :name="viewTransition" :css="!!direction"> -->
          <keep-alive>
            <router-view class="router-view"/>
          </keep-alive>
      <!-- </transition> -->
      <tabbar v-if="$route.matched[1]" v-model="$route.matched[1].meta.index" class="tabbar">
        <tabbar-item :badge="num==0?'':num.toString()" link="/index/order">
          <img slot="icon" src="../assets/order.png">
          <img slot="icon-active" src="../assets/order-active.png">
          <span slot="label">订单</span>
        </tabbar-item>
        <tabbar-item :link="router_goods_name">
          <img slot="icon" src="../assets/shop.png">
          <img slot="icon-active" src="../assets/shop-active.png">
          <span slot="label">商品</span>
        </tabbar-item>
        <tabbar-item link="/index/finance">
          <img slot="icon" src="../assets/caiwu.png">
          <img slot="icon-active" src="../assets/caiwu-active.png">
          <span slot="label">财务</span>
        </tabbar-item>
        <tabbar-item link="/index/set">
          <img slot="icon" src="../assets/set.png">
          <img slot="icon-active" src="../assets/set-active.png">
          <span slot="label">设置</span>
        </tabbar-item>
      </tabbar>
  </div>
</template>

<script>
import {Tabbar, TabbarItem} from "vux";
import { mapState } from "vuex";
export default {
  name: "Index",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  computed: {
    ...mapState({
      num: state => state.order.num,
      router_goods_name: state => state.router.router_goods_name
    })
  },
  methods: {
    
  },
  created(){
    
  },
  components: {
    Tabbar,
    TabbarItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.router-view{
  position: absolute;
  top:0;
  bottom: 53px;
  width: 100%;
}
.tabbar{
  position: fixed;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
  color: rgb(166, 197, 246)
}
</style>
